<template>
  <div class="container" ref="containerRef"></div>
</template>

<script lang="ts" setup>
// 引入echarts暴露所有内容
/*
  假设：
    export default aaa
    export {
      bbb,
      ccc
    }
  
  import * as XXX from 'xxx'
  // import aaa from 'xxx'
  // import { bbb } from 'xxx'
  // import aaa, { bbb, ccc } from 'xxx'
 
  XXX.default --> aaa
  XXX.bbb
  XXX.ccc
*/
// 1. 下载并引入echarts  pnpm add echarts
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const containerRef = ref();

onMounted(() => {
  // 2. 初始化echarts实例
  // const myEcharts = echarts.init(document.querySelector(".container")); // 不建议使用
  const myEcharts = echarts.init(containerRef.value);
  // 3. 定义图表配置项
  const option = {
    xAxis: {
      data: [1, 2, 3, 4],
    },
    yAxis: {},
    series: {
      type: "line",
      data: [20, 10, 30, 40],
    },
  };
  // 4. 渲染图表
  myEcharts.setOption(option);
});
</script>

<style scoped>
.container {
  width: 800px;
  height: 400px;
}
</style>
